/* Slideshow container */
.slideshow-container {
  width: 765px;
  height: minmax(860px, 100%);
  position: relative;
  margin: 0px;
  padding: 0px;
}

/* Hide the images by default */
.mySlides {
    display: none;
	grid-area: 2 / 2 / span 3 / span 1;
}

.showcase {
	display: grid;
	position: relative;
	top: 50px;
	grid-template: minmax(5px, 1fr) 531px 24px 295px minmax(5px, 1fr) / minmax(150px, 5fr) 765px minmax(150px, 2fr);
	background-color: white;
}

.showcase .text {
  color: #666;
  font-family: parkhillFreeman, "arial narrow", sansserif;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  text-align: right;
  word-wrap: break-word;
  grid-area: 4 / 1 / span 1 / span 1;
  position: absolute;
  top: 0px;
  right: -300px;
  z-index: 6;
}

.showcase .title {
  color: #666;
  font-family: parkhillFreeman, "arial narrow", sansserif;
  font-size: 24px;
  font-weight: 700;
  text-align: right;
  text-decoration: none;
  word-wrap: break-word;
  grid-area: 2 / 1 / span 1 / span 1;
  position: absolute;
  bottom: 0px;
  right: -300px;
  z-index: 6;
}

.showcase .background {
	background-color: #d1023a;
	grid-area: 2 / 2 / span 3 / span 1;
	z-index: 1;
}

.showcase .foreground {
	grid-area: 2 / 2 / span 3 / span 1;
	position: relative;
	z-index: 3;
}

.showcaseimg {
	width: 765px;
	height: 850px;
	grid-area: 2 / 2 / span 3 / span 1;
	position: relative;
	z-index: 2;
}

.stripe {
	background-color: #d1023a;
	position: relative;
	grid-area: 3 / 1 / span 1 / span 2;
	z-index: 1;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 3s;
  animation-name: fade;
  animation-duration: 3s;
}

@-webkit-keyframes fade {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: 0} 
  to {opacity: 1}
}